<template>
    <div>
        <el-dialog :visible.sync="visible" title="创建新节点">
            <div>
                <el-radio-group v-model="nodeType">
                    <el-radio label="leaf">叶子节点</el-radio>
                    <el-radio label="tree">树节点</el-radio>
                </el-radio-group>
            </div>
            <div>
                <textarea v-model="jsonString" rows="10" cols="50"></textarea>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">取消</el-button>
                <el-button type="primary" @click="confirmCreation">确认</el-button>
            </span>
        </el-dialog>
    </div>

</template>

<script setup>
import { ref, watch } from 'vue';
import { ElMessage, ElDialog } from 'element-plus';
console.log("Wdawdawdwadawsdwadwadawd");

const props = defineProps({
  visible: Boolean,
  parentNode: Object,
  data: Array
});

const emit = defineEmits(['close', 'create']);

const nodeType = ref('leaf');
const jsonString = ref('');
const nodeId = ref(Date.now());

watch(nodeType, (newType) => {
  // 根据选择的节点类型更新 JSON 字符串 json可以从服务器获取
  if (newType === 'leaf') {
    jsonString.value = JSON.stringify({ id: nodeId.value, type: 'leaf', url: '', label: '新叶子节点' }, null, 2);
  } else {
    jsonString.value = JSON.stringify({ id: nodeId.value, type: 'tree', label: '新树节点', children: [] }, null, 2);
  }
});

const closeDialog = () => {
  emit('close');
};

const confirmCreation = () => {
  try {
    const newNode = JSON.parse(jsonString.value);
    emit('create', newNode);
    closeDialog();
  } catch (error) {
    ElMessage.error('JSON 格式错误，请检查输入。');
  }
};
</script> 